.msgbox-main-btn,
.msgbox-main-btn:focus,
.msgbox-main-btn:hover {
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
  border: 1px solid var(--el-text-color-primary);
  outline: none;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
}

.msgbox-main-btn:hover {
  /* background: linear-gradient(
    -45deg,
    var(--el-color-primary-light-7),
    var(--el-color-success-light-7)
  );
  background-size: 200% 200%; */
  transform: scale(1.2);
}

.msgbox-gradient {
  /* background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); */
  background: linear-gradient(
    -45deg,
    rgba(238, 119, 82, 0.31),
    rgba(231, 60, 126, 0.31),
    rgba(35, 166, 213, 0.31),
    rgba(35, 213, 171, 0.31)
  );
  background-size: 600% 600%;
  background-color: var(--el-bg-color);
  animation: gradientBG 5s ease infinite;
  font-weight: bold;
  text-shadow: 0 0px 2px var(--el-bg-color);
}

.msgbox-rock-gradient {
  background: linear-gradient(
    -45deg,
    rgba(238, 119, 82, 0.31),
    rgba(231, 60, 126, 0.31),
    rgba(35, 166, 213, 0.31),
    rgba(35, 213, 171, 0.31)
  );
  background-color: var(--el-bg-color);
  background-size: 600% 600%;
  animation-name: rock, gradientBG;
  animation-duration: 1s, 5s;
  animation-timing-function: ease-in-out, ease;
  animation-iteration-count: infinite;
  font-weight: bold;
  text-shadow: 0 0px 2px var(--el-bg-color);
  transition: all 0.3 ease-in-out;
}

.modal-gradient {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background: linear-gradient(
    -45deg,
    rgba(238, 119, 82, 0.31),
    rgba(231, 60, 126, 0.31),
    rgba(35, 166, 213, 0.31),
    rgba(35, 213, 171, 0.31)
  );
  background-size: 600% 600%;
  animation: gradientBG 5s ease infinite;
  backdrop-filter: grayscale(100%);
  backdrop-filter: blur(5px);
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.msgbox-rock {
  animation: rock 1s 0s ease-in-out infinite;
}

@keyframes rock {
  0%,
  65% {
    transform: rotate(0deg);
  }
  70% {
    transform: rotate(2.55deg);
  }
  75% {
    transform: rotate(-2.55deg);
  }
  80% {
    transform: rotate(2.55deg);
  }
  85% {
    transform: rotate(-2.55deg);
  }
  90% {
    transform: rotate(2.55deg);
  }
  95% {
    -webkit-transform: rotate(-2.55deg);
    transform: rotate(-2.55deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.el-overlay {
  /* backdrop-filter: blur(100px); */
}
